<template>
	<view class="add-shore">
		<!-- 顶部导航 -->
		<view>
			<u-navbar
				:is-back="true"
				:border-bottom="false"
				:title-bold="true"
				:title="i18n.Title"
				:background="background"
				title-color="#ffffff"
				back-icon-color="#ffffff"
			></u-navbar>
		</view>
		<!-- 搜索框 -->
		<view class="top-search">
			<view class="search-box">
				<u-search :clearabled="true" shape="round" :placeholder="i18n.Search" :show-action="false" v-model="where.keyword" @change="search"></u-search>
			</view>
			<navigator url="../supplier_store/index" class="my-shore" hover-class="none">
				<span>{{ i18n.Store }}</span>
			</navigator>
		</view>
		<view style="z-index: 1;" v-show="navShow">
			<view class="">
				<!-- 选择商品 -->
				<goods-type @pid="getMsgFormSon"></goods-type>
				<!-- 商品排序 -->
				<view class="goods-box">
					<view class="goods-options" @click="checkoptions(0)" :class="0 == sortoptions ? 'checkoptions' : ''">
						<view>{{ i18n.Default }}</view>
						<view class="options-img"><u-icon name="arrow-down" v-if="0 == sortoptions"></u-icon></view>
					</view>
					<view class="goods-options" @click="checkoptions(1)" :class="1 == sortoptions ? 'checkoptions' : ''">
						<view>{{ i18n.Commission }}</view>
						<view class="options-img"><u-icon name="arrow-down" v-if="1 == sortoptions"></u-icon></view>
					</view>
					<view class="goods-options" @click="checkoptions(2)" :class="2 == sortoptions ? 'checkoptions' : ''">
						<view>{{ i18n.New }}</view>
						<view class="options-img"><u-icon name="arrow-down" v-if="2 == sortoptions"></u-icon></view>
					</view>
					<view class="goods-options" @click="checkoptions(3)" :class="3 == sortoptions ? 'checkoptions' : ''">
						<view>{{ i18n.Sales }}</view>
						<view class="options-img"><u-icon name="arrow-down" v-if="3 == sortoptions"></u-icon></view>
					</view>
					<view class="goods-options" @click="checkoptions(4), (sortPrice = !sortPrice)" :class="4 == sortoptions ? 'checkoptions' : ''">
						<view>{{ i18n.Price }}</view>
						<image class="options-img" src="../static/images/jj.png" v-if="sortPrice"></image>
						<image class="options-img" src="../static/images/cc.png" v-if="!sortPrice"></image>
					</view>
				</view>
			</view>
		</view>
		<scroll-view class="main" scroll-y="true" @scroll="scrollHome" @scrolltolower="loadmore()">
			<!-- 批发 -->
			<view class="wholesale">
				<view class="wholesale-top">
					<view class="store">
						<span>{{ i18n.Supplier }}</span>
						<text>{{ i18n.More }}</text>
					</view>
					<navigator url="/pages/store/supplier/index">
						<view class="quan">{{ i18n.All }}</view>
					</navigator>
				</view>
				<view class="wholesale-bottom">
					<scroll-view :scroll-x="true" style="height: 145rpx; white-space: nowrap;">
						<view class="head-box" @click="gosupplier(item.mer_id)" v-for="item in wholesale" :key="item.mer_id">
							<view class="store-head"><image :src="item.mer_avatar"></image></view>
							<text>{{ item.mer_name }}</text>
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 商品部分 -->
			<view class="section-box">
				<view style="z-index: 1;" v-show="!navShow">
					<view class="">
						<!-- 选择商品 -->
						<goods-type @pid="getMsgFormSon"></goods-type>
						<!-- 商品排序 -->
						<view class="goods-box">
							<view class="goods-options" @click="checkoptions(0)" :class="0 == sortoptions ? 'checkoptions' : ''">
								<view>{{ i18n.Default }}</view>
								<view class="options-img"><u-icon name="arrow-down" v-if="0 == sortoptions"></u-icon></view>
							</view>
							<view class="goods-options" @click="checkoptions(1)" :class="1 == sortoptions ? 'checkoptions' : ''">
								<view>{{ i18n.Commission }}</view>
								<view class="options-img"><u-icon name="arrow-down" v-if="1 == sortoptions"></u-icon></view>
							</view>
							<view class="goods-options" @click="checkoptions(2)" :class="2 == sortoptions ? 'checkoptions' : ''">
								<view>{{ i18n.New }}</view>
								<view class="options-img"><u-icon name="arrow-down" v-if="2 == sortoptions"></u-icon></view>
							</view>
							<view class="goods-options" @click="checkoptions(3)" :class="3 == sortoptions ? 'checkoptions' : ''">
								<view>{{ i18n.Sales }}</view>
								<view class="options-img"><u-icon name="arrow-down" v-if="3 == sortoptions"></u-icon></view>
							</view>
							<view class="goods-options" @click="checkoptions(4), (sortPrice = !sortPrice)" :class="4 == sortoptions ? 'checkoptions' : ''">
								<view>{{ i18n.Price }}</view>
								<image class="options-img" src="../static/images/jj.png" v-if="sortPrice"></image>
								<image class="options-img" src="../static/images/cc.png" v-if="!sortPrice"></image>
							</view>
						</view>
					</view>
				</view>
				<!-- 商品列表 -->
				<view class="list-box item u-border-bottom" v-for="(item, index) in storelist" :key="item.product_id" @click="goGoodsDetail(item.product_id, item.supplier_id)">
					<view class="stor-list">
						<view class="list-fl"><image :src="item.image"></image></view>
						<view class="list-fr">
							<view class="list-head">{{ item.store_name }}</view>
							<view class="subtitle">
								<view class="list-sub" v-if="item.is_hot == 1">{{ i18n.Sell }}</view>
								<view class="list-sub" v-if="item.is_benefit == 1">{{ i18n.promotion }}</view>
								<view class="list-sub" v-if="item.is_best == 1">{{ i18n.Recommend }}</view>
								<view class="list-sub" v-if="item.is_new == 1">{{ i18n.Publish }}</view>
							</view>
							<view class="list-Commission">
								{{ i18n.Commission }}:
								<i>{{ item.extension_one }}%</i>
							</view>
							<view class="list-bottom">
								<view class="price">{{ i18n.Selling }}:{{ item.price }}</view>
								<image
									class="add-img"
									src="../static/images/product_add.png"
									@click.stop="addgoods(item.product_id)"
									v-if="addimgarr.indexOf(item.product_id) == -1 && !checked && !item.is_added"
								>
									
								</image>
								<image
									class="add-img"
									src="../static/images/product_added.png"
									@click.stop="addgoods(item.product_id)"
									v-if="addimgarr.indexOf(item.product_id) != -1 && !checked"
								>
									
								</image>
								<image class="add-img" src="../static/images/product_added.png" @click.stop="noaddgoods" v-if="addimgarr.indexOf(item.product_id) == -1 && item.is_added"></image>
								<image
									class="add-img"
									src="../static/images/select_selected.png"
									@click.stop="addgoods(item.product_id)"
									v-if="addimgarr.indexOf(item.product_id) != -1 && checked && !item.is_added"
								>
									
								</image>
							</view>
						</view>
					</view>
				</view>
				<view style="text-align: center; margin-bottom: 10rpx;">{{ loadTitle }}</view>
				<!-- 加载更多 -->
			</view>
		</scroll-view>
		<!-- 加入我的店 -->
		<view class="add-store">
			<view class="">
				<label>
					<checkbox @click="delallfun" :checked="checked" />
					<text>{{ i18n.Checkall }}</text>
				</label>
			</view>
			<view class="add-store-fr">
				<view class="goods-sum" @click="selecAttr = !selecAttr">
					共{{ addgoodlist.length }}件商品
					<u-icon style="color:#BDBDBD; margin: 20rpx;" name="arrow-up"></u-icon>
				</view>
				<button type="default" class="addgoods-btn" @click="pushgoods">{{ i18n.AddStore }}</button>
			</view>
		</view>
		<view style="position: fixed; bottom: 0; z-index: 999999;">
			<u-popup v-model="selecAttr" mode="bottom" border-radius="28" height="770rpx" width="100%">
				<view class="cart">
					<scroll-view scroll-y="true" style="height: 100%;">
						<view class="cart-item" v-for="(item, index) in addgoodlist" :key="item.product_id" @click="goGoodsDetail(item.product_id, item.supplier_id)">
							<view class="stor-list">
								<view class="list-fl"><image :src="item.image" mode="widthFix"></image></view>
								<view class="list-fr">
									<view class="list-head">{{ item.store_name }}</view>
									<view class="list-Commission">
										>{{ i18n.Commission }}:
										<i>{{ item.extension_one }}%</i>
									</view>
									<view class="list-bottom">
										<view class="price">
											<i style="margin-right: 10rpx;">{{ i18n.Selling }}:</i>
											{{ item.price }}
										</view>
										<image class="add-img" src="../static/images/product_delete.png" @click.stop="delgoods(item.product_id)"></image>
									</view>
								</view>
							</view>
						</view>
						<image class="nogoodsimg" src="https://gbay1.dcyu.com/uploads/images/noCart.png" v-if="addgoodlist.length == 0"></image>
					</scroll-view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
const globalData = getApp().globalData;
import { merchantlist, productlist, productadd, open_state } from '@/api/store.js';
import goodsType from '@/components/selectGoodstype/index.vue';
export default {
	computed: {
		i18n() {
			return globalData.$t('add_shore');
		}
	},
	components: {
		goodsType
	},
	data() {
		return {
			storeid: '', //店铺ID
			selecAttr: false,
			navShow: false, //判断是否吸顶
			sortoptions: 0,
			background: {
				backgroundColor: '#FD342A'
			},
			checked: false, //添加所有
			isadddelimg: '',
			addgoodslength: 0,
			addgoodlist: [], //添加商品列表
			wholesale: [], //供应商列表
			storelist: [], //商品列表
			addimgarr: [],
			yesgoodslength: 0, //可添加的商品长度
			sortPrice: true, //排序
			goodsLoading: false,
			categoryLoading: false,
			loadTitle: globalData.$t('add_shore').LoadMore,
			where: {
				order: '', //排序
				page: 1, //页码
				limit: 100, //条数
				keywork: '', //关键字搜索
				cate_id: '', //分类id
				pid: '' //顶级分类id
			}
		};
	},
	methods: {
		getMsgFormSon(pid) {
			this.where.pid = pid;
			console.log(pid);
			this.getstorelist(); //获得商品
		},
		// 商铺首页滚动 navbar 吸顶
		scrollHome: function(e) {
			this.navShow = e.detail.scrollTop >= 130;
		},
		loadmore: function() {
			setTimeout(() => {
				this.where.limit += 100;
				this.getstorelist(); //获得商品信息
			}, 500);
		},
		gosupplier: function(id) {
			uni.navigateTo({
				//供应商
				url: `/pages/store/supplier_home/index?supplierid=${id}&storeid=${this.storeid}`
			});
		},
		goGoodsDetail(id, supplier_id) {
			//跳转详情页
			uni.navigateTo({
				url: `/pages/store/goods_detail1/index?goodsid=${id}&storeid=${this.storeid}&supplier_id=${supplier_id}`
			});
		},
		regain: function() {
			this.addgoodlist = undefined;
			this.addgoodlist = new Array();
			this.addimgarr = undefined;
			this.addimgarr = new Array();
		},
		delallfun: function() {
			//全选商品
			let that = this;
			this.checked = !this.checked;
			if (this.checked) {
				this.regain();
				this.storelist.map(item => {
					if (!item.is_added) {
						that.addgoodlist.push(item);
						that.addimgarr.push(item.product_id);
						return item;
					}
				});
			} else {
				this.regain();
			}
		},
		pushgoods: function() {
			//加入我的店
			let that = this;
			let idarr = { product_id: '' };
			idarr.product_id = that.addgoodlist
				.map(item => {
					return item.product_id;
				})
				.join(',');
			productadd(idarr)
				.then(res => {
					if (res.status == 200) {
						that.getstorelist();
						this.regain();
						this.checked = false;
						return that.$util.Tips({
							title: res.message
						});
					}
				})
				.catch(res => {
					return that.$util.Tips({
						title: res.message
					});
				});
		},
		//添加商品
		addgoods: function(id) {
			let that = this;
			let isadd = false;
			that.addgoodlist.some(item => {
				if (id == item.product_id) {
					isadd = true;
					return that.$util.Tips({
						title: that.i18n.Yiadd
					});
					return true;
				}
			});
			if (!isadd) {
				this.storelist.some(item => {
					if (id == item.product_id) {
						that.addimgarr.push(item.product_id);
						that.addgoodlist.push(item);
						isadd = false;
						return true;
					}
				});
			}
			if (that.yesgoodslength == that.addgoodlist.length) {
				that.checked = true;
			}
		},
		delgoods: function(id) {
			//删除商品
			const index = this.addgoodlist.findIndex(item => item.product_id === id);
			this.addgoodlist.splice(index, 1);
			this.addimgarr.splice(index, 1);
			this.checked = false;
		},
		checktype: function(e) {
			this.typeindex = e;
		},
		noaddgoods: function() {
			return this.$util.Tips({
				title: that.i18n.ChunAdd
			});
		},
		checkoptions: function(e) {
			switch (e) {
				case 0:
					this.sortoptions = e;
					this.where.order = '';
					this.getstorelist();
					break;
				case 1:
					this.sortoptions = e;
					this.where.order = '';
					this.getstorelist();
					break;
				case 2:
					this.sortoptions = e;
					this.where.order = 'is_new';
					this.getstorelist();
					break;
				case 3:
					this.sortoptions = e;
					this.where.order = 'sales';
					this.getstorelist();
					break;
				case 4:
					this.sortoptions = e;
					this.where.order = this.sortPrice ? 'price_asc' : 'price_desc';
					this.getstorelist();
					break;
			}
		},
		wholesalelist: function() {
			//获得头部信息
			let that = this;
			merchantlist().then(res => {
				that.wholesale = res.data.list;
			});
		},
		search: function() {
			this.getstorelist();
		},
		getstorelist: function() {
			//获得商品列表
			let that = this;
			productlist(that.where)
				.then(res => {
					that.storelist = res.data.list;
					let loadend = res.data.list.length < that.where.limit;
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? that.i18n.YiLoadMore : that.i18n.LoadMore;
					that.yesgoodslength = 0;
					res.data.list.map(res => {
						if (!res.is_added) {
							that.yesgoodslength++;
						}
					});
				})
				.catch(err => {
					uni.showToast({
						title: err
					});
				});
		},

		viewstatus: function() {
			//查看开店状态
			let that = this;
			open_state()
				.then(res => {
					if (res.status == 200) {
						switch (res.data.open_state) {
							case 0:
								uni.redirectTo({
									url: '/pages/store/privatestop/index'
								});
								break;
							case 1:
								uni.redirectTo({
									url: '/pages/store/privatestop/index'
								});
								break;
							case 3:
								uni.redirectTo({
									url: '/pages/store/store_type/index'
								});
								break;
						}
					}
				})
				.catch(err => {
					return that.$util.Tips({
						title: err
					});
				});
		}
	},
	onLoad(option) {
		uni.setNavigationBarTitle({
			title: this.i18n.Title
		});
		this.storeid = option.storeid;
	},
	onShow() {
		this.wholesalelist(); //获得供应商列表
		this.getstorelist(); //获得商品
		this.viewstatus(); //查看开店状态
	}
};
</script>

<style lang="scss" scoped>
.wrap {
	padding: 24rpx;
}

.item {
	padding: 24rpx 0;
	color: $u-content-color;
	font-size: 28rpx;
}
.ceiling {
	position: fixed;
	width: 100%;
	z-index: 111111;
	background-color: #f5f5f5;
}

.checktype {
	font-size: 36rpx;
	font-weight: bold;
	color: #fd342a;
}

.checkoptions {
	color: #222222 !important;
}

.add-shore {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	padding-bottom: 100rpx;
	background: left top/750rpx 360rpx no-repeat fixed;
	overflow: hidden;
}
.main {
	flex: 1;
	min-height: 0rpx;
	background-color: #f5f5f5;
}
.top-search {
	margin: 0;
	border: 1rpx solid #fd342a;
	padding: 17rpx 30rpx;
	height: 98rpx;
	background-color: #fd342a;
}
.search-box {
	float: left;
	width: 580rpx;
	.search {
		height: 64rpx;
		background: #f7f7f7;
		border-radius: 34rpx;
	}
}
.my-shore {
	position: relative;
	float: right;
	height: 64rpx;
	width: 80rpx;
	/* #ifdef H5 */
	width: 100rpx;
	/* #endif */
	background-image: url('https://gbay.dcyu.com/uploads/images/product_myshop.png');
	background-repeat: no-repeat;
	background-size: 36rpx 36rpx;
	background-position: 20rpx 0;
	/* #ifdef H5 */
	background-position: 30rpx 0;
	/* #endif */
	span {
		position: absolute;
		bottom: 0;
		color: #ffffff;
		font-size: 20rpx;
	}
}

// 供应商
.wholesale-top {
	margin: 30rpx 0rpx 30rpx 30rpx;
	height: 60rpx;
}
.store {
	float: left;
	line-height: 44rpx;
	span {
		display: flex;
		font-size: 30rpx;
		font-weight: bold;
	}
	text {
		font-size: 24rpx;
		color: #999999;
	}
}
.quan {
	float: right;
	margin-top: 20rpx;
	width: 120rpx;
	background-image: url('https://gbay.dcyu.com/uploads/images/22.png');
	background-repeat: no-repeat;
	background-size: 38rpx 38rpx;
	background-position: 60rpx 0;
	color: #999999;
}
.wholesale-bottom {
	height: 199rpx;
	padding-top: 27rpx;
	.head-box {
		display: inline-block;
		margin: 0rpx 30rpx;
		width: 120rpx;
		height: 145rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 24rpx;
		color: #222222;
		.store-head {
			image {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
			}
		}
	}
}
// 商品部分
.section-box {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #f5f5f5;
	border-radius: 30rpx 30rpx 0px 0px;
}

// 商品排序
.goods-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	overflow: hidden;
	padding: 0 30rpx 30rpx;
	.goods-options {
		display: flex;
		align-items: center;
		font-weight: 400;
		color: #999999;
		.options-img {
			display: flex;
			align-items: center;
			margin-left: 10rpx;
			font-size: 22rpx;
			width: 25rpx;
			height: 30rpx;
		}
	}
}

//商品列表
.list-box {
	overflow: hidden;
	margin: 0 30rpx 12rpx 30rpx;
	height: 244rpx;
	background: #ffffff;
	border-radius: 20rpx;
	.stor-list {
		display: flex;
		flex-wrap: wrap;
		/* #ifdef MP */
		padding: 0 24rpx;
		/* #endif */
		height: 190rpx;
		.list-fl {
			margin-right: 20rpx;
			width: 190rpx;
			height: 190rpx;
			background: #ffffff;
			border-radius: 8rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.list-fr {
			.list-head {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 432rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #222222;
			}
			.subtitle {
				display: flex;
				flex-wrap: nowrap;
				margin: 15rpx 0;
			}
			.list-sub {
				margin-right: 12rpx;
				padding: 0 15rpx;
				height: 34rpx;
				background: #ffece8;
				border-radius: 17px;
				font-size: 20rpx;
				font-weight: 400;
				line-height: 34rpx;
				text-align: center;
				color: #de5855;
			}
			.list-Commission {
				display: flex;
				align-items: flex-end;
				font-weight: 400;
				color: #fd342a;
				font-size: 24rpx;
				i {
					margin-left: 10rpx;
					font-size: 34rpx;
					font-weight: 400;
					color: #fd342a;
				}
			}
			.list-bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 8rpx;
				height: 48rpx;
				.price {
					font-size: 24rpx;
					font-weight: 400;
					color: #222222;
				}
				.add-img {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}
}

//加入我的店
.add-store {
	position: fixed;
	bottom: 0;
	z-index: 999999999999;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30rpx;
	width: 100%;
	height: 98rpx;
	background-color: #ffffff;
	.add-store-fr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		.goods-sum {
			image {
				padding: 0 40rpx 0 16rpx;
				width: 24rpx;
				height: 24rpx;
			}
		}
		.addgoods-btn {
			width: 260rpx;
			height: 80rpx;
			background: #fd342a;
			border-radius: 40px;
			font-size: 32rpx;
			font-weight: 400;
			line-height: 80rpx;
			color: #ffffff;
		}
	}
}
.mask {
	height: 100%;
	background-color: rgba(0, 0, 0, 0.9);
}
.cart {
	z-index: 99999999999;
	height: 680rpx;
	background: #ffffff;
	border-radius: 20px 20px 0px 0px;
	padding: 40rpx 30rpx 0 30rpx;
	.cart-item {
		overflow: hidden;
		height: 202rpx;
		background-color: #ffffff;
		.stor-list {
			display: flex;
			flex-wrap: wrap;
			.list-fl {
				margin-right: 20rpx;
				width: 141rpx;
				height: 141rpx;
				background: #ffffff;
				image {
					width: 100%;
				}
			}
			.list-fr {
				flex: 1;
				padding-bottom: 30rpx;
				border-bottom: 1px solid #eaeaea;
				.list-head {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 432rpx;
					font-size: 28rpx;
					font-weight: bold;
					margin-bottom: 12rpx;
					color: #222222;
				}
				.list-sub {
					margin-right: 12rpx;
					width: 112rpx;
					height: 34rpx;
					background: #ffece8;
					border-radius: 17px;
					font-size: 20rpx;
					font-weight: 400;
					line-height: 34rpx;
					text-align: center;
					color: #de5855;
				}
				.list-Commission {
					display: flex;
					align-items: flex-end;
					font-weight: 400;
					color: #fd342a;
					font-size: 24rpx;
					i {
						margin-left: 10rpx;
						font-size: 34rpx;
						font-weight: 400;
						color: #fd342a;
					}
				}
				.list-bottom {
					display: flex;
					justify-content: space-between;
					margin-top: 8rpx;
					height: 48rpx;
					.prece {
						font-size: 24rpx;
						font-weight: 400;
						line-height: 33px;
						color: #222222;
					}
					.add-img {
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		}
	}
	.nogoodsimg {
		width: 400rpx;
		height: 300rpx;
		margin: 150rpx 150rpx;
	}
}
</style>
